<template>
  <div class="app-container">
    <el-tag
      type="info"
      size="large"
      style="font-size: 16px"
      v-if="invoiceState == 'NOT_ISSUED'"
      >订单完成后15天结束售后期，可申请开票。开票金额=实付金额-售后退款金额</el-tag
    >
    <el-row class="mt20 mb20">
      <el-col :span="18">
        <el-radio-group size="small" v-model="invoiceState">
          <el-radio-button label="NOT_ISSUED">未开票订单</el-radio-button>
          <el-radio-button label="ISSUANCE_ING">开具中</el-radio-button>
          <el-radio-button label="ISSUED">已开具</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col
        v-if="invoiceState == 'NOT_ISSUED'"
        :span="6"
        style="display: flex; justify-content: flex-end"
      >
        <el-button type="primary" size="small" @click="handleApply"
          >申请开票</el-button
        >
        <el-button type="warning" size="small" @click="handleEdit"
          >修改开票信息</el-button
        >
      </el-col>
    </el-row>
    <NoApply v-if="invoiceState == 'NOT_ISSUED'" ref="noApplyRefs" />
    <Applying v-if="invoiceState == 'ISSUANCE_ING'" ref="applyingRefs" />
    <ApplyEnd v-if="invoiceState == 'ISSUED'" ref="applyEndRefs" />
  </div>
</template>

<script>
import ApplyEnd from "./components/applyEnd";
import Applying from "./components/applying";
import NoApply from "./components/noApply";
import {
  apiDoIssuingInvoices,
  apiGetSelectListSumMoney,
} from "@/api/invoice.js";
export default {
  components: {
    ApplyEnd, 
    Applying,
    NoApply,
  },
  data() {
    return {
      invoiceState: "NOT_ISSUED",
    };
  },
  mounted() {},
  methods: {
    handleApply() {
      const selectionRows = this.$refs.noApplyRefs.selectionRows;
      if (!selectionRows || selectionRows.length <= 0) {
        this.$message({ type: "warning", message: "请选择需要开票的订单" });
        return false;
      }
      const params = selectionRows.map((item) => {
        return { id: item.id };
      });
      apiGetSelectListSumMoney(params).then((res) => {
        if (res.code == "SUCCESS") {
          const h = this.$createElement;
          this.$msgbox({
            title: "提交后不可修改，请确认开票信息",
            message: h("p", null, [
              h(
                "p",
                null,
                `开票金额：${this.$filters.filterPriceFormat(res.data)}元 `
              ),
              h("p", null, `订单数：${params.length}条`),
              h(
                "p",
                { style: "color:red;margin-top:40px;" },
                "请联系客服提交发票抬头"
              ),
            ]),
            showCancelButton: true,
            confirmButtonText: "确认提交",
            cancelButtonText: "返回",
            beforeClose: (action, instance, done) => {
              if (action === "confirm") {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = "执行中...";
                apiDoIssuingInvoices(params)
                  .then((res) => {
                    done();
                    this.$message({
                      type: "success",
                      message: "申请成功",
                    });
                    this.$refs.noApplyRefs.refresh()
                    instance.confirmButtonLoading = false;
                  })
                  .catch((err) => {
                    instance.confirmButtonLoading = false;
                    done();
                  });
              } else {
                done();
              }
            },
          }).then((action) => {});
        }
      });
    },
    handleEdit() {
      this.$message({
        type: "warning",
        message: "开票信息通过线下联系客服提供",
      });
    },
  },
};
</script>
